<template>
  <div class="nav-item" :style="containerStyle">
    <!-- 具名插槽用于导航内容 -->
    <slot name="header-nav"></slot>

    <!-- 使用插槽让父组件自定义p标签内容 -->
    <p :style="[basePStyle, pStyle]">
      <slot name="title">
        {{ defaultTitle }} <!-- 默认内容 -->
      </slot>
    </p>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 允许通过props设置默认标题
  defaultTitle: {
    type: String,
    default: '默认标题'
  },
  // p标签自定义样式
  pStyle: {
    type: Object,
    default: () => ({})
  },
  // 容器自定义样式
  containerStyle: {
    type: Object,
    default: () => ({})
  },
  // 是否显示箭头效果
  showArrow: {
    type: Boolean,
    default: true
  },
  // 箭头比例 (0-1)
  arrowRatio: {
    type: Number,
    default: 0.2,
    validator: (value) => value >= 0 && value <= 0.5
  }
});

const basePStyle = computed(() => ({
  color: '#fff',
  background: '#3498db',
  padding: '8px 16px',
  width: '200px',
  clipPath: props.showArrow
    ? `polygon(0% 0%, 100% 0%, calc(100% - ${props.arrowRatio * 100}%) 100%, 0% 100%)`
    : 'none'
}));
</script>

<style scoped>
.nav-item {
  position: relative;
  display: inline-block;
}

/* 基础样式 */
p {
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0;
  font-size: 14px;
  text-align: center;
}

p:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
</style>
